<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="panel panel-default operation" hidden>
  <div class="panel-heading title"></div>
<div class="layui-card-body">
<form class="layui-form " action="" lay-filter="info" style="width: 700px;margin-top: 10px">
      <input name="id" hidden/>
      <input id="_stationName" hidden/>
      
        <div class="layui-form-item">
      <label class="layui-form-label">所属机关</label>
      <div class="layui-input-block">
        <input type="taxorgName" name="taxorgName" placeholder="请输入所属机关" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">企业</label>
      <div class="layui-input-block">
        <input type="stationName" name="stationName" placeholder="请输入企业" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">摄像头编号</label>
      <div class="layui-input-block">
        <input type="camId" name="camId" placeholder="请输入摄像头编号" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">离线时间</label>
      <div class="layui-input-block">
        <input type="offlineTime" name="offlineTime" placeholder="请输入离线时间" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">恢复时间</label>
      <div class="layui-input-block">
        <input type="recoverTime" name="recoverTime" placeholder="请输入恢复时间" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">field1</label>
      <div class="layui-input-block">
        <input type="field1" name="field1" placeholder="请输入field1" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">field2</label>
      <div class="layui-input-block">
        <input type="field2" name="field2" placeholder="请输入field2" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">field3</label>
      <div class="layui-input-block">
        <input type="field3" name="field3" placeholder="请输入field3" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">field4</label>
      <div class="layui-input-block">
        <input type="field4" name="field4" placeholder="请输入field4" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">field5</label>
      <div class="layui-input-block">
        <input type="field5" name="field5" placeholder="请输入field5" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">field6</label>
      <div class="layui-input-block">
        <input type="field6" name="field6" placeholder="请输入field6" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">field7</label>
      <div class="layui-input-block">
        <input type="field7" name="field7" placeholder="请输入field7" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">field8</label>
      <div class="layui-input-block">
        <input type="field8" name="field8" placeholder="请输入field8" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">是否删除(1未删除；0已删除)</label>
      <div class="layui-input-block">
        <input type="deleted" name="deleted" placeholder="请输入是否删除(1未删除；0已删除)" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">创建人</label>
      <div class="layui-input-block">
        <input type="createId" name="createId" placeholder="请输入创建人" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">更新人</label>
      <div class="layui-input-block">
        <input type="updateId" name="updateId" placeholder="请输入更新人" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">创建来源(1.web 2.android 3.ios )</label>
      <div class="layui-input-block">
        <input type="createWhere" name="createWhere" placeholder="请输入创建来源(1.web 2.android 3.ios )" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">创建时间</label>
      <div class="layui-input-block">
        <input type="createTime" name="createTime" placeholder="请输入创建时间" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label"></label>
      <div class="layui-input-block">
        <input type="updateTime" name="updateTime" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
  <div class="layui-form-item">
  <div class="layui-input-block">
    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
    <!-- <button  class="layui-btn layui-btn-primary" id="btn_cancel">返回</button> -->
  </div>
</div>
</form>
</div>
</div>


<div class="table_div0">
  <div id="searchParam">
    <div class="layui-form-item">
      <div class="layui-input-inline layui-form">
      	<select id="taxorgcodeInput">
		</select>
      </div>
      
      <div class="layui-input-inline">
        <input type="text" id="stationName" class="layui-input"  autocomplete="off" placeholder="请输入企业名称">
      </div>
      <!-- <div class="layui-input-inline">
        <input type="text" id="camId" class="layui-input"  autocomplete="off" placeholder="请输入摄像头编号">
      </div> -->
      
      <div class="layui-input-inline">
        <input type="text" id="createTimeInput" class="layui-input"  autocomplete="off" placeholder="请输入时间范围">
      </div>
      
      <div class="layui-input-inline ">
        <button class="layui-btn" onclick="search0()"  id="search">查询</button>
        <button class="layui-btn" id="export">导出</button>
      </div>
    </div>

  </div>
  <table class="layui-table" id="showTable0" lay-filter="showTable0" ></table>
</div>


<div class="table_div" hidden>
  <div id="searchParam">
    <div class="layui-form-item">
      <!-- <div class="layui-input-inline">
        <input type="text" id="stationName" class="layui-input"  autocomplete="off" placeholder="请输入企业名称">
      </div>
      <div class="layui-input-inline">
        <input type="text" id="camId" class="layui-input"  autocomplete="off" placeholder="请输入摄像头编号">
      </div> -->
      
      <div class="layui-input-inline ">
        <!-- <button class="layui-btn" onclick="search()"  id="search">查询</button>
        <button class="layui-btn" id="export">导出</button> -->
        <button class="layui-btn" id="btn_cancel">返回</button>
        <button class="layui-btn" id="export1">导出</button>
      </div>
    </div>

  </div>
  <table class="layui-table" id="showTable" lay-filter="showTable" ></table>
</div>


<script type="text/html" id="tool0">
  <a class="layui-btn layui-btn-xs" lay-event="view">查看明细</a>
</script>

</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
  //获取token
  var token = CoreUtil.getData("access_token");
  //地址栏转义token中的#号
  var tokenQuery = token.replace("#", "%23");
  var tableIns0;
  var tableIns1;
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var $ = jQuery = layui.jquery;
  var laydate = layui.laydate;
  
  var firstDayOfMonth = firstDayOfMonth();
  var lastDayOfMonth = lastDayOfMonth();
  console.log(firstDayOfMonth);
  console.log(lastDayOfMonth);
  console.log(firstDayOfMonth + " 至 " + lastDayOfMonth);
  $("#createTimeInput").val(firstDayOfMonth + " 至 " + lastDayOfMonth);
  
  
  $(function() {
	  // 加载机关
      CoreUtil.sendGet("/sys/deptlist",null , function(res) {
			if (res.code == '0') {
				var value = res.data[0];
				var opt = "<option value = ''>请选择所属机关</option>";
				for (var i in value) {
					opt += '<option value = "' + value[i].id + '">'
							+ value[i].name + '</option>';
				}
				
				$("#taxorgcodeInput").html(opt);
				form.render('select'); //需要渲染一下
			} else {
				layer.msg(res.msg);
				return false;
			}
		}, false, false);
		
  });
  
  layui.use(['table', 'layer', 'laydate'], function () {
	
	  laydate.render({
			elem : '#createTimeInput',
			type : 'date',
			range : '至',
			done : function(value, date, endDate) {
				if (value != null && value != undefined
						&& value != "") {
					startTime = value.split("至")[0];
					endTime = value.split("至")[1];
					
				} else {
					startTime = null;
					endTime = null;
				}

			}
		});
	  
	  
	//加载table
	    tableIns0 = table.render({
	      elem: '#showTable0'
	      , contentType: 'application/json'
	      , headers: {"authorization": token}
	      , page: true //开启分页
	      , url: '/nr/offlinecam/oreCollectList0' //数据接口
    	  , where: {createTimeStart : $("#createTimeInput").val().split('至')[0],
 			 createTimeEnd : $("#createTimeInput").val().split('至')[1]} // 初始化时的过滤条件
	 			 
	      , method: 'POST'
	      , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
	        return {
	          "code": res.code, //解析接口状态
	          "msg": res.msg, //解析提示文本
	          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
	          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
	        }
	      }
	      , cols: [
	        [
	          {type: 'checkbox', fixed: 'left'},
	          {field: 'id', title: '主键', sort: true, hide: true},
	          {field: 'taxorgName', title: '所属机关', sort: true},
	          {field: 'stationName', title: '企业', sort: true},
	          {field: 'value', title: '离线次数', sort: true},
	          {width: 90, toolbar: "#tool0", title: '操作', fixed: 'right'}

	        ]
	      ]
	      , toolbar: '#toolbar'
	    }); 
	  
	  
	  
    //加载table
    tableIns1 = table.render({
      elem: '#showTable'
      , contentType: 'application/json'
      , headers: {"authorization": token}
      , page: true //开启分页
      , url: '/nr/offlinecam/oreCollectList' //数据接口
   	  , where: {createTimeStart : $("#createTimeInput").val().split('至')[0],
 			 createTimeEnd : $("#createTimeInput").val().split('至')[1]} // 初始化时的过滤条件
 	 		
      , method: 'POST'
      , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
        }
      }
      , cols: [
        [
          {type: 'checkbox', fixed: 'left'},
          {field: 'id', title: '主键', sort: true, hide: true},
          {field: 'taxorgName', title: '所属机关', sort: true},
          {field: 'stationName', title: '企业', sort: true},
          {field: 'camId', title: '摄像头编号', sort: true},
          {field: 'offlineTime', title: '离线时间', sort: true,templet: function(d){
              // 使用Layui的日期格式化函数formatDate
              if(!CoreUtil.isEmpty(d.offlineTime)){
            	  return layui.util.toDateString(d.offlineTime, 'yyyy-MM-dd HH:mm:ss');
              }else{
            	  return '';
              }
            }},
          {field: 'recoverTime', title: '恢复时间', sort: true,templet: function(d){
              // 使用Layui的日期格式化函数formatDate
              if(!CoreUtil.isEmpty(d.recoverTime)){
            	  return layui.util.toDateString(d.recoverTime, 'yyyy-MM-dd HH:mm:ss');
              }else{
            	  return '';
              }
            }},
            
            {field: 'field8', title: '离线时间(分钟)', sort: true,templet: function(d){
                // 使用Layui的日期格式化函数formatDate
                if(!CoreUtil.isEmpty(d.recoverTime)){
                	var recoverDate = new Date(layui.util.toDateString(d.recoverTime, 'yyyy-MM-dd HH:mm:ss'));
                	var offlineDate = new Date(layui.util.toDateString(d.offlineTime, 'yyyy-MM-dd HH:mm:ss'));
              		// 获取两个日期的毫秒数
              		var timeDiff = recoverDate.getTime() - offlineDate.getTime();
              		// 将毫秒差值转换为分钟
              	 	return Number((timeDiff / (1000 * 60)).toFixed(2));
                }else{
              	  return '';
                }
			}},            
            
        ]
      ]
      , toolbar: '#toolbar'
    });

    //列操作
    table.on('tool(showTable0)',function (obj) {
      var data = obj.data;
      switch (obj.event) {
        case 'view':
          $(".table_div0").hide();
          $(".table_div").show();
          var _stationName = data.stationName;
          $("#_stationName").val(_stationName);
          search(data.stationName);
          break;
      }
    });

    //导出
    $('#export').on('click', function () {
      //原先分页limit
      var createTimeInput = $("#createTimeInput").val();
      var arr = createTimeInput.split('至');
    	
      //原先分页limit
      var exportParams = {
          limit: -1,
          stationName: $("#stationName").val(),
    	  taxorgcode : $("#taxorgcodeInput").val(),
      	  createTimeStart : arr[0],
		  createTimeEnd : arr[1],
      };
      CoreUtil.sendPost("/nr/offlinecam/oreCollectList0", exportParams, function (res) {
        //初始化渲染数据
        if (res.data != null && res.data.records != null) {
          table.exportFile(tableIns1.config.id, res.data.records, 'xls');
        }
      });
    });
	
    
  	//导出
    $('#export1').on('click', function () {
        
    	var createTimeInput = $("#createTimeInput").val();
        var arr = createTimeInput.split('至');
    	
    	//原先分页limit
        var exportParams = {
          limit: -1,
          stationName: stationName,
    	  stationId: $("#_stationName").val(),
      	  createTimeStart : arr[0],
		  createTimeEnd : arr[1],
    	  camId: $("#camId").val()
        };
        CoreUtil.sendPost("/nr/offlinecam/oreCollectList", exportParams, function (res) {
          
        	
          //初始化渲染数据
          if (res.data != null && res.data.records != null) {
            var records = res.data.records;
        	for(var i in records){
        		
        		if(!CoreUtil.isEmpty(records[i].recoverTime)){
                  	var recoverDate = new Date(layui.util.toDateString(records[i].recoverTime, 'yyyy-MM-dd HH:mm:ss'));
                  	var offlineDate = new Date(layui.util.toDateString(records[i].offlineTime, 'yyyy-MM-dd HH:mm:ss'));
                	// 获取两个日期的毫秒数
                	var timeDiff = recoverDate.getTime() - offlineDate.getTime();
                	// 将毫秒差值转换为分钟
                	records[i].field8 = Number((timeDiff / (1000 * 60)).toFixed(2));
				}else{
					records[i].field8 = '';
				}
        	}
        	table.exportFile(tableIns1.config.id, res.data.records, 'xls');
          }
        });
      });
    
    
    //删除
    var tipDialog=function (ids) {
      layer.open({
        content: "确定要删除么?",
        yes: function(index, layero){
          layer.close(index); //如果设定了yes回调，需进行手工关闭
          CoreUtil.sendDelete("/gasOfflineCam/delete",ids,function (res) {
            layer.msg(res.msg, {time:1000},function () {
              search();
            });
          });
        }
      });
    };

    //返回
    $("#btn_cancel").click(function() {
      $(".table_div0").show();
      $(".table_div").hide();
      return false;
    });
  });

  //执行查询
  function search(stationId) {
	var createTimeInput = $("#createTimeInput").val();
    var arr = createTimeInput.split('至');
	  
	//这里以搜索为例
    tableIns1.reload({
      where: { //设定异步数据接口的额外参数，任意设
    	  // stationName: $("#stationName").val(),
    	  stationName: stationName,
    	  stationId: stationId,
      	  createTimeStart : arr[0],
		  createTimeEnd : arr[1],
    	  camId: $("#camId").val()
      }
      , page: {
        curr: 1 //重新从第 1 页开始
      }
    });
  };
  
  
  //执行查询
  function search0() {
	var createTimeInput = $("#createTimeInput").val();
	var arr = createTimeInput.split('至');
	//这里以搜索为例
    tableIns0.reload({
      where: { //设定异步数据接口的额外参数，任意设
    	  stationName: $("#stationName").val(),
    	  taxorgcode : $("#taxorgcodeInput").val(),
      	  createTimeStart : arr[0],
		  createTimeEnd : arr[1],
    	  camId: $("#camId").val()
      }
      , page: {
        curr: 1 //重新从第 1 页开始
      }
    });
  };
  
  
  function firstDayOfMonth() {
		const currentDate = new Date();
		const year = currentDate.getFullYear();//获取当前年
		const month = String(currentDate.getMonth() + 1).padStart(2, "0");//获取当前月
		const firstDay = "01";//日
		return `${year}-${month}-${firstDay}`;
  };
	
  function lastDayOfMonth() {
  	// 获取当前日期
  	const currentDate = new Date();
  	// 获取当前年份
  	let year = currentDate.getFullYear();
  	// 获取下个月的月份，使用 padStart 在月份小于 10 时在前面补零
  	let month = String(currentDate.getMonth() + 2).padStart(2, "0");
  	// 如果月份为 '13'，说明当前是12月，需要更新年份并将月份设置为 '01'
  	if (month === '13') {
  	    year = year + 1;
  	    month = '01';
  	}
  	 
 	  	// 设置每个月的第一天为 '01'
 	  	let firstDay = "01";
 	  	// 构建下个月的第一天的日期字符串，格式为 'YYYY-MM-DD'
 	  	const firstDayOfNextMonth = `${year}-${month}-${firstDay}`;
 	  	// 计算当前月的最后一天，通过减去一天的毫秒数来得到
 	  	const lastDayOfMonth = new Date(new Date(firstDayOfNextMonth).getTime() - 86400000);
 	  	// 将最后一天的日期转换为 ISO 格式，并提取日期部分
 	  	return lastDayOfMonth.toISOString().split("T")[0];
	}
  
</script>